import { useState, useEffect } from 'react';
import { Button } from 'antd';
import { ProFormItem } from '@ant-design/pro-form';
import ChooseGoods from '@/components/ChoseGoods';
import ChooseActivities from '@/components/ChooseActivities';
import { PlusOutlined } from '@ant-design/icons';
import styles from '../index.less';

interface IFormJumpPageProps {
  value?: any;
  pageType: string;
  onChange?: (v: any) => void;
}

const FormJumpPage: React.FunctionComponent<IFormJumpPageProps> = (props) => {
  const { value, onChange, pageType } = props;
  const [chooseGoodsVisible, setChooseGoodsVisible] = useState(false);
  const [chooseActivitiesVisible, setChooseActivitiesVisible] = useState(false);
  const [selectInfo, setSelectInfo] = useState<any>({});
  const [confirmLoading, setConfirmLoading] = useState<boolean>(false);

  useEffect(() => {
    if (value.id) {
      setSelectInfo(value);
    }
  }, []);

  useEffect(() => {
    onChange?.({
      ...value,
      page: '',
      type: pageType,
    });
  }, [pageType]);

  // 营销活动确认
  const handleChooseActivitySubmit = (info: any) => {
    setConfirmLoading(true);
    onChange?.({
      ...info,
      page: '',
      type: value.type,
    });
    setTimeout(() => {
      setChooseActivitiesVisible(false);
      setConfirmLoading(false);
    }, 500);
  };

  // 商品确认
  const handleChooseGoodsSubmit = (info: any) => {
    setConfirmLoading(true);
    onChange?.({
      ...info,
      page: '',
      type: value.type,
    });
    setTimeout(() => {
      setChooseGoodsVisible(false);
      setConfirmLoading(false);
    }, 500);
  };

  // 选择商品,营销活动
  const handleShowGoodsModal = (type: string) => {
    if (type === 'goods') {
      setChooseGoodsVisible(true);
    } else {
      setChooseActivitiesVisible(true);
    }
  };

  return (
    <>
      {value.id && (
        <div className={styles.cardBox}>
          <div className={styles.cardInfo}>
            <span className={styles.cardName}>{value.title}</span>
            <span className={styles.cardId}>{value.id}</span>
          </div>

          <div
            className={styles.cardBtn}
            onClick={() => {
              handleShowGoodsModal(pageType);
            }}
          >
            重选
          </div>
        </div>
      )}

      {!value.id && (
        <ProFormItem name={['value']} noStyle>
          <Button
            className={styles.btn}
            type="dashed"
            icon={<PlusOutlined />}
            onClick={() => handleShowGoodsModal(pageType)}
          >
            {pageType === 'goods' ? '选择商品' : '选择活动'}
          </Button>
        </ProFormItem>
      )}
      {/* 选择商品 */}
      <ChooseGoods
        visible={chooseGoodsVisible}
        selectGoodsInfo={selectInfo}
        confirmLoading={confirmLoading}
        onSubmit={handleChooseGoodsSubmit}
        onCancel={() => {
          setChooseGoodsVisible(false);
        }}
      />
      {/* 选择营销活动 */}
      <ChooseActivities
        visible={chooseActivitiesVisible}
        confirmLoading={confirmLoading}
        selectActivityInfo={selectInfo}
        onSubmit={handleChooseActivitySubmit}
        onCancel={() => {
          setChooseActivitiesVisible(false);
        }}
      />
    </>
  );
};

export default FormJumpPage;
